<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
</head>
<body>
<div id="app">
    <h1>教师评价</h1>
    <div>
        <el-table
                :data="Teacher"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="teacherId"
                    label="教师编号"
            >
            </el-table-column>
            <el-table-column
                    prop="teacherRealname"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="teacherSchool"
                    label="毕业院校"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="teacherDegree"
                    label="最高学位"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button @click="teacherEvaluate(scope.row)" type="text" size="small">评价</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="notes"
                    label="备注"
            >
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    layout=" prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="教师评价" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="评价内容" :label-width="formLabelWidth" prop="content">
                    <el-input v-model="ruleForm.content" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveTeacherEvaluate('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</div>
<#include "/footer.ftl">
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            teacherId: 1,
            pageIndex: 1,
            pageSize: 5,
            total: 50,
            Teacher: [],
            dialogFormVisible: false,
            ruleForm: {
                content: '',
            },
            rules: {
                content: [
                    {required: true, message: '请输入评价', trigger: 'blur'},
                ],
            },
            formLabelWidth: '120px'
        },
        created: function () {
            this.getTeacherMsg();
        },
        methods: {
            saveTeacherEvaluate: function (formName) {
                $.ajax({
                    type: 'post',
                    url: ' /api/student/saveTeacherEvaluate',
                    data: {
                        teacherId: this.teacherId,
                        teacherEvaluateContent: this.ruleForm.content
                    },
                    dataType: 'json',
                    success: function (res) {
                        _this.dialogFormVisible = false;
                        if (res.status == 200) {
                            _this.$message({
                                message: '评价成功',
                                type: 'success'
                            });
                        } else {
                            _this.$message.error(res.message);
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })


            },
            teacherEvaluate: function (row) {
                this.dialogFormVisible = true;
                this.teacherId = row.teacherId;
            },
            getTeacherMsg: function () {

                $.ajax({
                    type: 'post',
                    url: '/api/student/listTeacherByStuId',
                    data: {pageIndex: this.pageIndex},
                    dataType: 'json',
                    success: function (res) {
                        _this.pageSize = res.resData.pageSize;
                        _this.total = res.resData.total;
                        _this.Teacher = res.resData.list;
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })

            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getTeacherMsg();
            }
        }
    })

</script>

</body>
</html>
